<template>
	<view>
		<uni-forms ref="baseForm" :modelValue="baseFormData" >
			<uni-forms-item label="xboxIp" required>
				<uni-easyinput v-model="xboxIp" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="获取设备时间" required>
				<button @click="getDeviceTime">获取设备时间</button>
			</uni-forms-item>
			<uni-forms-item label="加密参数" required>
				<button @click="encrypt">加密参数</button>
			</uni-forms-item>
			<uni-forms-item label="获取实时数据" required>
				<button @click="getRealData">获取实时数据</button>
			</uni-forms-item>
			<uni-forms-item v-show="!running" label="开始实时数据" required>
				<button  @click="start">开始实时数据</button>
			</uni-forms-item>
			<uni-forms-item v-show="running" label="停止实时数据" required>
				<button  @click="stop">停止实时数据</button>
			</uni-forms-item>
		</uni-forms>	
		
		<view class="mt-8">
			间隔时间：<uni-easyinput v-model="interDuration"></uni-easyinput>
		</view>
		<view class="mt-8" style="border:solid 2px red">
			<view>
				请求时间：{{requestTime}}
			</view>
			<view>
				反馈时间：{{replyTime}}
			</view>
		</view>
		<view class="mt-8" style="border:solid 2px red">
			<view>
				设备时间：{{deviceTime}}
			</view>
			<view style="color: red; font-weight: bold;">
				响应时长：{{duration}}
			</view>
		</view>
		<view class="mt-8" style="border:solid 2px yellow">
			<view>
				请求数据：
			</view>
			<view class="pa-8">
				<uni-easyinput v-model="requestData"/>
			</view>
		</view>
		
		<view class="mt-8" style="border:solid 2px blue">
			<view>
				加密参数：
			</view>
			<view class="pa-8">
				{{ encryption }}
			</view>
			<view style="white-space: pre-wrap;width:  100%;word-break: break-all;">
				加密后数据：{{cipherText}}
			</view>
		</view>
		<view class="mt-8" style="border:solid 2px green">
			<view>
				设备反馈数据：
			</view>
			<view style="color: red;">
				{{responseData}}
			</view>
		</view>
	</view>
	
</template>

<script>
	import CryptoJS from "crypto-js";
	export default {
		data() {
			return {
				title: 'Hello',
				xboxIp: '192.168.3.166',
				requestTime: 0,
				replyTime: 0,
				duration: 0,
				deviceTime: '1704944944142',
				encryption: {
					key: '375c9e89fc20726e',
					offset: 'abc1234567890efg',
					padding: 'CryptoJS.pad.Pkcs7',
					encode: 'Hex',
					mode: 'CryptoJS.mode.CBC'
				},
				cipherText: '',
				responseData: {},
				running: false,
				interDuration: 500,
				interval: null
			}
		},
		computed: {
			xboxUrl() {
				return 'http://' + this.xboxIp
			},
			requestData() {
				return JSON.stringify( {
					"machineCode": "7042336300020157021",
					"groupTag": "32",
					"tags": ["五合一_温度", "五合一_湿度", "五合一_氨气", "五合一_硫化氢","五合一_PM25","烟感","门锁1"],
					"time": this.deviceTime,
					"timeout": 0
				})
			},
			duration() {
				return this.replyTime - this.requestTime
			}
		},
		mounted() {
			
			this.start()
			if(document){
				uni.showToast({
					title:'有document'
				})
				// 添加键盘事件监听
				// document.addEventListener('keydown', (e)=>{
				// 	uni.showModal({
				// 		content: JSON.stringify(e)
				// 	})
				// })
			}else if(plus) {
				plus.key.addEventListener('keydown', (e)=>{
					// 82 是菜单
					// uni.showModal({
					// 	content: JSON.stringify(e)
					// })
				})
				// uni.showToast({
				// 	title:'有plus'
				// })
			} else {
				uni.showToast({
					title:'没有document和plus'
				})
				
			}
		
		},
		methods: {
			// 获取设备时间
			getDeviceTime() {
				return new Promise((resolve, reject)=>{
					uni.request({
					    url: this.xboxUrl+'/api/getTime', //仅为示例，并非真实接口地址。
					    method: 'POST',
					    success: (res) => {
							const data = res.data
							this.deviceTime = data.result.data
							resolve(this.deviceTime)
					    },
						fail:(err)=>{
							reject(err)
						}
					});
				})
			},
			// 加密请求数据
			encrypt() {
				const key = CryptoJS.enc.Utf8.parse(this.encryption.key); //16位
				const iv = CryptoJS.enc.Utf8.parse(this.encryption.offset);
				const mode = CryptoJS.mode.CBC
				const padding = CryptoJS.pad.Pkcs7
				const text = this.requestData
				const cipher = CryptoJS.AES.encrypt(text, key, {
					iv,
					mode,
					padding
				})
				this.cipherText = cipher.ciphertext.toString(CryptoJS.enc.Hex)
			},
			// 获取实时数据
			async getRealData() {
				this.requestTime = new Date().getTime();
				this.replyTime = this.requestTime
				// 先获取时间
				await this.getDeviceTime();
				// 加密参数
				this.encrypt();
				const self = this;
				uni.request({
				    url: this.xboxUrl+'/api/datagroup/getTagsValue', //仅为示例，并非真实接口地址。
				    method: 'POST',
					data: {
						para: this.cipherText
					},
				    success:(res)=> {
						const data = res.data
						this.responseData = data.result.data
						this.replyTime = new Date().getTime()
				    },
					fail(err){
					}
				});
			},
			start() {
				this.running = true
				this.interval = setInterval(()=>{
					this.getRealData()
				}, this.interDuration)
			},
			stop() {
				this.running = false
				clearInterval(this.interval)
			},
			handleKeyup(event) {
				alert(JSON.stringify(event))
			}
		}
	}
</script>

<style>
	.mt-8 {
		margin-top: 8rpx;
	}
	.pa-8 {
		padding: 8rpx;
	}
</style>